<template>
    <div>
        <headers></headers>
        <div class="app-basement app-height"
            v-loading='loading'
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.3)"
        >
            <div class="content-basement content-top">
                <div class="li" v-for="item in list" :key="item.id" @click="clickLi(item)">
                    <div class="li_text">
                        <p>{{item.title}}</p>
                        <span><i>{{new Date(item.create_time).getDate()}}</i>/{{new Date(item.create_time).getFullYear()+'.'+ (new Date(item.create_time).getMonth()+1)}}</span>
                    </div>
                    <img :src="item.cover?item.cover:imgsrc2" alt="">
                </div>
                <div class="page" v-if="list.length!=0">
                    <el-pagination
                        background
                        layout="sizes,prev, pager, next,jumper"
                        :total="total"
                        :page-sizes="[6, 10, 15, 30]"
                        :page-size='limit'
                        :current-page='page'
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        >
                    </el-pagination>
                </div>
            </div>
        </div>
        <footers></footers>
    </div>
</template>

<script>
import headers from '@/components/header'
import footers from '@/components/footer'
import {articleList} from '@/api/apply.js'
export default {
    components:{headers,footers},
    data() {
        return {
            total:10,
            limit:6,
            page:1,
            list:[],
            loading:false,
            imgsrc2:require('@/assets/zcfg.jpg'),
        }
    },
    methods: {
        handleCurrentChange(val){
            this.page= val
            this.seach()
        },
        handleSizeChange(val){
            this.limit = val
            this.seach()
        },
        seach(){
            this.loading=true
            articleList({page:this.page,limit:this.limit,category:'政策法规'}).then(res=>{
                this.loading=false
                if(res.code==200){
                    this.total = res.data.count
                    this.list = res.data.list
                }
            })
        },
        clickLi(row){
            console.log(row)
            this.$router.push({
                path:'/training/details',
                query:{
                    src:row.file
                }
            })
        }
    },
    created() {
        this.seach()
    },
}
</script>

<style lang="scss" scoped>
    .app-height{
       min-height:calc(100vh - 548px);
       .content-top{
           margin-top:24px;
           
       }
    }
    .li{
        margin-bottom: 24px;     
        padding:15px;    
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: space-between;
        cursor: pointer;
        .li_text{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            span{
                color:#999;
                i{
                    font-style:normal;
                    color:#009999;
                    font-size:24px;
                    margin-right:12px;
                }
            }
        }
        &>img{
            height:125px;
        }
        &:hover{
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2)
        }
    }
    .page{
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-bottom: 24px;
        // ::v-deep{
        //     .el-pagination{
        //         width: 45%;
        //         display: flex;
        //         justify-content: space-between;
        //         .el-pager{
        //             flex:1;
        //         }
        //     }
        // }
    }
</style>